<extend name="desktop_default/template/base_index2" />

<block name="area_header">

    <style type="text/css">
        .product{
            background: #F6f6f6;
            padding:15px;
        }
        .product .detail{
            background: #FFFFFF;
            padding:15px;
        }
        .product .more-other>div{
            background: #FFFFFF;
            padding:15px;
        }
        .product .info{
            background: #FFFFFF;
            height: auto;
            margin-bottom: 15PX;
            font-size: 1rem;
        }
        .mini-product{
            position: relative;
            border-bottom: 1px dotted #eee;
            padding: 5px;
            font-size: 1rem;
            text-align: left;
        }
        .mini-product a{
            color:#111111;
        }
        .mini-product a:hover{
            color:#ff2222;
        }
        .mini-product:hover{
            background: #f8f8f8;
        }
        .mini-product img{
            position: absolute;
            left: 10px;
            top: 10px;
            width:60px;
            height:60px;
        }
        .mini-product .p-name{
            padding-left: 70px;
            height: 70px;
        }
        .product .info .img-panel{
            height: auto;
            padding: 10px;
        }
        .product .info .other{
            padding: 10px;
        }
        .other .p-name{
            font-weight: bold;
            font-size: 1.6rem;
        }
        .info .price-panel{
            MARGIN: 0PX;
            background-color: #FFF2E8;
            font-size: 1rem;
            position: relative;
        }
        .info .price-panel li{
            border: 0px;
            background-color: #FFF2E8;
            line-height: 26px;
            margin-bottom: 5px;
        }
        .info .price-panel li .property-type{
            display: inline;
            float: left;
            width: 60px;
            color: #6c6c6c;
        }
        .info .price-panel .property-cont{
            text-align: left;
        }
        .info .price-panel li .sale-price{
            vertical-align: baseline;
            font-size: 26px;
            font-weight: 700;
            font-family: Tahoma,Arial,Helvetica,sans-serif;
            color: #F40;
        }
        .info .price-panel .counter{
            position: absolute;
            top: 0px;
            right: 0px;
        }
        .info .price-panel .count-down{
            background: #f50;
            color: #fff;
            font-size: 1.2rem;
            padding: 2px 5px;
        }
        .info .loc{
            width: 60px;
        }
        em{
            font-style: NORMAL;
        }

        /* 数量样式 */
        .counter{
            color: #6C6C6C;
            text-align: center;
        }

        .counter a{

            color: #6C6C6C;
        }
        .counter .property-type{
            font-size: 1.8rem;
        }

        .am-input-group-sm>.am-form-field, .am-input-group-sm>.am-input-group-label, .am-input-group-sm>.am-input-group-btn>.am-btn {
            padding: 5px 10px !important;
        }
        /*  按钮 */

        a.btn-buy:focus,
        a.btn-buy:hover{
            color: #E6611D;
        }
        a.btn-cart:focus,
        a.btn-cart:hover{
            color: #fff7f5;
        }
        .btn-buy{
            color: #E5511D;
            border-color: #F0CAB6;
            background: #FFE4D0;
        }
        .btn-cart{
            color: #FFF;
            border-color: #F40;
            background: #F40;
        }
        .js_minus,.js_plus{
            cursor: pointer;
        }
        .js_plus.disabled,.js_minus.disabled{
            color: #ccc;
            cursor: not-allowed;
            background-color: #ededed;
        }



        .sku_table .sku_info{
            width:100%;
        }
        .sku_table .sku_info .sku_value:hover,
        .sku_table .sku_info .sku_value.selected{

            padding: 2px 5px;
            color: #F40;
            border: 2px solid #F40;
            background: #FFF;
        }

        .sku_table .sku_info .sku_value{
            display:block;
            padding: 3px 6px;
            min-width: 10px;
            display: inline-block;
            white-space: nowrap;
            text-decoration: none;
            margin: 0 5px 10px 0;
            float: left;
            border: 1px solid #DCDCDC;
            transition-property: border-color,background;
            -moz-transition-duration: .2s;
            -o-transition-duration: .2s;
            -webkit-transition-duration: .2s;
            transition-duration: .2s;
            color: #3C3C3C;
        }
        /* 没库存 */
        .sku_table .sku_info a.sku_value.out_of_stock,
        .sku_table .sku_info a.sku_value.out_of_stock:hover{

            cursor: not-allowed;
            padding: 3px 6px;
            color: #DEDEDE;
            border: 1px dashed #DEDEDE;
            background: #FFF;
        }

        .detail img{
             width:100% !important;
        }

        /* 图片轮播样式 */

        .product .img-origin{
            width:400px;
            height:400px;
            margin: auto;
            position: relative;
        }

        .product .img-origin img{
            width:400px;
            height:400px;
            margin: auto;
        }
        .product .img-thumbnails{
            width:400px;
            margin: auto;
        }
        .product .img-thumbnails li{
            display: inline;
            border: 2px solid #fff;
        }
        .product .img-thumbnails li.selected{
            border-color: #f40;
        }
        .product .img-thumbnails li>a{
            padding:0px;
        }
        .product .img-origin .am-icon-search{
            background: #f8f8f8;
            width: 30px;
            height: 30px;
            position: absolute;
            right: 0px;
            bottom: 0px;
            font-size: 1.6rem;
            padding: 0px;
            color: #ccc;
            text-align: center;
            line-height: 30px;
        }
        .product .img-origin .ks-imagezoom-lens {
            background: url(__IMG__/detail/grid.png);
            cursor: move;
            z-index: 1;
            font-size: 0;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 200px;
            height: 200px;
        }
        .product .img-origin .zoom-img{
            width: 400px;
            height: 400px;
            position:absolute;
            background: #fff;
            right: -420px;
            top: 0px;
            overflow: hidden;
            z-index: 1001;
        }
        .product .img-origin .zoom-img img{
            position:absolute;
            width: 800px;
            height: 800px;
            z-index: 1002;
            top:0px;
            left:0px;
        }
        .random-product {
            background:#FFFFFF ;
            padding: 15px;
            margin-bottom: 15px;
            border-bottom: 0px;
        }
        .random-product .mini-product{
            width:120px;
            width: 180px;
            text-align: center;
        }

        .random-product .mini-product .p-name{
            padding-left: 0px;
            height: 60px;
        }

        .random-product .mini-product img{
            position: relative;
            top:0px;
            left:0px;
            width:100px;
            height:100px;
        }

        .img-country img{
            width: 32px;
            margin-top: 1.2rem;
            margin-right: 5px;
        }
        a.j_more_tip{
            color: #6262DA;
        }
    </style>

    <script type="text/javascript" src="__JS__/sco.countdown2.js"></script>
    <script type="text/javascript" src="__CDN__/jquery-addcart-fly/jquery.fly.min.js"></script>
</block>

<block name="area_body">
    <include file="desktop_default/width/right" />

    <header class="header">
        <include file="desktop_default/width/top" />
        {:W('Partials/nav_group')}
    </header>

    <div class="product  am-margin-bottom-lg am-cf">

        <div class=" shop-container">
            <div class="am-hide">
                <ol class="am-breadcrumb am-breadcrumb-slash">
                    <li><a href="{:U('Shop/Index/index')}" class="am-icon-home">首页</a></li>
                </ol>
            </div>
            <div class="info am-u-lg-12 am-u-md-12 ">

                <form action="" method="post" class="product_form">
            <div class="js_img_slider img-panel am-fl am-u-lg-5 am-u-md-6">
                <div class="js_img_origin img-origin">
                    <img src="{:getImageUrl($banners[0])}" alt="大图">
                    <i class="am-icon-search"></i>
                    <span class="js_zoom_holder ks-imagezoom-lens am-hide"></span>
                    <div class="js_zoom_img zoom-img am-hide" ><img src="{:getImageUrl($banners[0])}" alt="大图"></div>
                </div>
                <div class="js_img_thumbnails img-thumbnails am-cf">
                    <ul class="am-list  am-cf">
                        <volist name="banners" id="vo" >
                            <li class="am-fl am-margin-sm <eq name="key" value="0" > selected</eq>" style="width: {:intval(100/count($banners))}%;max-width: 60px;" >
                               <a href="javascript:void(0);"> <img style="width:100%;height:60px;margin:auto;" data-original-src="{:getImageUrl($vo)}" src="{:getImageUrl($vo,120)}" alt="图片"/></a>
                            </li>
                        </volist>
                    </ul>
                </div>
            </div>

            <div class="other am-fr  am-u-lg-7 am-u-md-6">
                <div class="img-country am-cf">
                    <img class="am-fl am-img-responsive"  src="__PUBLIC__/Common/img/country/by{$product.dt_origin_country}.jpg"  >

                    <p class="p-name am-fl">{$product.name}</p>
                </div>
                <div class="price-panel">
                    <ul class="am-list price-panel am-padding-sm" >

                        <li>
                            <span class="property-type">价格</span>
                            <div class="property-cont">
                            <strong style="font-size: 14px; color: rgb(60, 60, 60);font-style: normal; font-weight: 400; text-decoration: line-through;"><em style="text-decoration: none;">¥</em><em class="tb-rmb-num">{$product.ori_price}</em></strong>
                            </div>
                        </li>

                        <li>
                            <span class="property-type">促销价</span>
                            <div class="property-cont sale-price ">
                                ¥
                                <span class="js_sale_price">
                                    <if condition="isset($product['_min_price'])">
                                        <if condition="$product['_min_price'] eq $product['_max_price']">
                                            {$product._min_price}
                                            <else/>
                                            {$product._min_price}-¥{$product._max_price}
                                        </if>
                                        <else/>
                                        {$product.price}
                                    </if>
                                </span>
                                    <eq name="product['is_time_limit']" value="1">
                                        <if condition=" $product['price_end_time'] lt $now_time ">

                                            <else/>
                                            <span class="count-down">

                                                限时<span data-until="{$product.price_end_time}" class=" js_countdown" >0</span>
                                            </span>

                                        </if>
                                    </eq>
                            </div>

                            <span class="property-type">关税</span>
                            <div class="property-cont">
                                <span class="am-link-muted">{:($product['tax_rate']*100)}%(小于 ￥{:C('DUTY_FREE_PRICE')}免税)</span>
                            </div>
                            <span class="property-type">购买须知</span>
                            <div class="property-cont">
                                <span class="am-link-muted">
                                    以商品实际销售价格作为完税价格（征税基数），参照行邮税税率征收税款。
                                    <span class="more-tip am-hide ">应征税额在50元（含50元）以下的，海关予以免征。消费者购买斑马跨境贸易电子商务进口商品，以“个人自用、合理数量”为原则，参照《海关总署公告2010年第43号（关于调整进出境个人邮递物品管理措施有关事宜）》要求，每次限值为1000元人民币，超出规定限值的，应按照货物规定办理通关手续。但单次购买仅有一件商品且不可分割的，虽超出规定限值，经海关审核确属个人自用的，可以参照个人物品规定办理通关手续。对于违反规定，超出个人自用合理数量购买的，系统将予以退单，情节严重的，将追究个人法律责任。
                                    </span>
                                    <a class="j_more_tip" >...显示更多</a>
                                    </span>
                            </div>
                             </li>

                        <li class="counter">
                            <span class="property-type">{$product.total_sales}</span>
                            <div class="counter-bd">
                                <div class="sell-counter">
                                    <a href="javascript:;" title="交易成功{$product.total_sales}件" >
                                        <span>交易成功</span>
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="am-padding-sm am-cf">
                    <span class="loc property-type am-fl">发货地</span>
                    <div class="property-cont am-text-left am-fl">
                        {$product['loc_country']}{$product['loc_province']}{$product['loc_city']}{$product['loc_area']}
                    </div>
                </div>
                <hr data-am-widget="divider" style="margin:0px;" class="am-divider am-divider-dotted" />
                <eq name="product['has_sku']" value="1">
                    <div class="am-padding-sm am-cf">
                        <include file="desktop_default/template/sku" sku_list="{$sku_list}" sku_arr="{:json_encode($sku_arr)}"  />
                    </div>
                </eq>

                <div class="item-count am-cf am-padding-sm js_number_stepper">
                    <span class="loc property-type am-fl">数量</span>
                    <div class=" property-cont am-text-left am-fl">
                        <div style="width:100px;" class="am-input-group am-input-group-sm">
                            <span class="am-input-group-label js_minus"><i class="am-icon-minus "></i></span>
                            <input type="text" disabled="disabled" class="am-diabled am-form-field am-text-center js_count" style="width: 4rem;"  name="item_count" value="1" />
                            <span class="am-input-group-label js_plus"><i class="am-icon-plus "></i></span>
                        </div>
                        (库存 <span class="js_quantity">{$product['quantity']}</span>件)
                    </div>

                </div>

                <div class="btn-control  am-margin-bottom-sm ">
                    <eq name="product['onshelf']" value="0">
                        <a href="#" class="am-btn am-btn-danger am-disabled">该商品已下架 </a>
                        <else/>
                    <a data-no-alert="1" data-am-loading="{spinner: 'circle-o-notch', loadingText: '正在购买...'}" href="{:U('Shop/ShoppingCart/buy',array('pid'=>$product['id']))}" target-form="product_form" class="ajax-post js_buy am-btn btn-buy am-padding-left-lg am-padding-right-lg">立即购买</a>
                    <a data-when-done="addProduct" data-no-alert="1" data-no-refresh="1"  data-am-loading="{spinner: 'circle-o-notch', loadingText: '正在加入购物车...'}" href="{:U('Shop/ShoppingCart/addItem',array('pid'=>$product['id']))}" target-form="product_form" class="ajax-post js_addcart am-btn btn-cart  am-padding-left-lg am-padding-right-lg" ><i class="am-margin-right-sm am-icon-shopping-cart"></i>加入购物车</a>

                    </eq>
                </div>

                <include file="desktop_default/template/bd_share" content="__SELF__" />
            </div>

            </form>

            </div>

            <div class="random-product am-cf am-fl  am-u-lg-12 am-u-md-12">
                <div class="">推荐商品</div>
                <hr/>
                <volist name="random" id="vo">

                <div class="am-fl mini-product ">
                    <div class="am-text-center  am-margin-bottom-sm">
                        <a href="{:U('Shop/Product/detail',array('id'=>$vo['id']))}">
                            <img src="{:getImageUrl($vo['main_img'],80)}" />
                        </a>
                    </div>

                    <div class="">
                        <p class="p-name">
                            <a href="{:U('Shop/Product/detail',array('id'=>$vo['id']))}">{$vo['name']}</a>
                        </p>
                        <p>
                            促销价：<span class="am-text-danger">{:round($vo['price'],2)}元</span>
                        </p>
                    </div>

                </div>

                </volist>
            </div>

            <div class="detail am-u-lg-12 am-u-md-12">
                <div class="">商品介绍</div>
                <hr/>
                <div class="detail-html am-center" style="width:800px;">
                {$product.detail}
                </div>
            </div>

        </div>


    </div>

    <include file="desktop_default/width/floor" />

</block>

<block name="area_footer">




    <script type="text/javascript">

        //是否选择了商品SKU，如果有的话
        function hasCheckedProductSku(){

            var sku_id = $("#sku_table .js_sku_id").val();
            if(window.itboye.has_sku && sku_id.length < 0){

                alertMsg("请先选择商品规格!");
                return false;
            }

            return true;
        }

        function initButtons(){

            window.itboye = $.extend({
            },window.itboye);
            window.itboye.has_sku = {$product.has_sku};

            $(".js_buy").click(function(ev){
                //
                if(hasCheckedProductSku()){
                    //TODO: 跳转到立即购买页面
                    console.log("跳转到立即购买页面!");
                    return true;
                }

                return false;

            });



            $(".js_addcart").click(function(){
                if(hasCheckedProductSku()){
                    //TODO: 加入购物车
                    return true;
                }

                return false;
            });

        }

        function initSliders(){
            var $slider = $(".js_img_slider");
            var $originImg = $(".js_img_origin img");
            var searchIcon = $(".am-icon-search",$slider);
            var zoomHolder = $(".js_zoom_holder",$slider);
            var zoomImgPanel = $(".js_zoom_img",$slider);
            var zoomImg = $(".js_zoom_img img",$slider);

            $(".js_img_thumbnails li",$slider).hover(function(){
                if($(this).hasClass("selected")){
                    return;
                }

                $(".js_img_thumbnails li.selected",$slider).removeClass("selected");
                $(this).addClass("selected");

                $(".js_img_thumbnails li",$slider)

                var imgSrc = $("img",this).attr("src");
                var oriImgSrc = $("img",this).data("original-src");
                $originImg.attr("src",oriImgSrc);
                zoomImg.attr("src",oriImgSrc);
            })

            $originImg.mousemove(function(ev){
//                console.log(ev);

                var offsetX = ev.offsetX - 100;
                var offsetY = ev.offsetY - 100;
                offsetX = offsetX < 0 ? 0 : offsetX;
                offsetY = offsetY < 0 ? 0 : offsetY;
                offsetX = offsetX > 200 ? 200 : offsetX;
                offsetY = offsetY > 200 ? 200 : offsetY;
//
                if(!searchIcon.hasClass("am-hide")){
                    searchIcon.addClass("am-hide");
                    zoomHolder.removeClass("am-hide");
                    zoomImgPanel.removeClass("am-hide");
                }

                zoomHolder.css({top:offsetY,left:offsetX});
                zoomImg.css({top:-2*offsetY,left:-2*offsetX});
            });

            zoomImgPanel.mousemove(function(ev){

                if(searchIcon.hasClass("am-hide")){
                    searchIcon.removeClass("am-hide");
                    zoomHolder.addClass("am-hide");
                    zoomImgPanel.addClass("am-hide");
                }
            });

            zoomHolder.mousemove(function(ev){

                ev.stopPropagation();
                var offset =  $originImg.offset();
                var pageX = ev.pageX - offset.left - 100;
                var pageY = ev.pageY - offset.top - 100;
                pageX = pageX < 0 ? 0 : pageX;
                pageY = pageY < 0 ? 0 : pageY;

                console.log(pageX,pageY);
                if((pageX > 300 || pageY > 300) && !searchIcon.hasClass("am-hide")){
                    searchIcon.addClass("am-hide");
                    zoomHolder.removeClass("am-hide");
                    zoomImgPanel.removeClass("am-hide");
                }

                pageX = pageX > 200 ? 200 : pageX;
                pageY = pageY > 200 ? 200 : pageY;

                zoomHolder.css({top:pageY,left:pageX});
                zoomImg.css({top:-2*pageY,left:-2*pageX});
            });

            zoomHolder.mouseleave(function(ev){

                if(searchIcon.hasClass("am-hide")) {
                    zoomHolder.addClass("am-hide");
                    searchIcon.removeClass("am-hide");
                    zoomImgPanel.addClass("am-hide");
                }
            });

        }

        $(function(){
            //立即购买与加入购物车
            initButtons();
            //初始化图片查看
            initSliders();


            //商品数控制
//            var quantity = parseInt($(".js_number_stepper .js_quantity").text());
            var $js_minus = $(".js_number_stepper .js_minus");
            var $js_plus = $(".js_number_stepper .js_plus");
            var $js_count = $(".js_number_stepper .js_count");

            if(parseInt($js_count.val()) == 1){
                $js_minus.addClass("disabled");
            }

            $js_plus.click(function(){
                var quantity = parseInt($(".js_number_stepper .js_quantity").text());
                console.log("js plus!");
                if($js_plus.hasClass("disabled")){
                    return;
                }
                // +1
                var curQuantity = $js_count.val();

                if(quantity == curQuantity){
                    $js_plus.addClass("disabled");
                }else{
                    curQuantity ++;
                }
                if(curQuantity > 1){
                    $js_minus.removeClass("disabled");
                }
                $js_count.val(curQuantity);

            });

            $js_minus.click(function(){
                console.log("js minus!");
                var quantity = parseInt($(".js_number_stepper .js_quantity").text());

                if($js_minus.hasClass("disabled")){
                    return;
                }

                // -1
                var curQuantity = $js_count.val();

                if(curQuantity == 1){
                    $js_minus.addClass("disabled");
                }else{
                    curQuantity--;
                }

                if(curQuantity < quantity){
                    $js_plus.removeClass("disabled");
                }

                $js_count.val(curQuantity);
            });



        });//商品数目选择




    $(".am-slider-default .am-control-thumbs li").hover(function(){
        $(".am-slider-default .am-control-thumbs li").removeClass("am-active");
        $(this).addClass("am-active");
    });

        function addProduct(event){
            var offset = $(".J_cartNum").offset();

            var flyer = $('.js_img_thumbnails .selected img').clone();
            flyer.css("width","80px");
            flyer.fly({
                start: {
                    left: event.pageX,
                    top: event.pageY
                },
                end: {
                    left: offset.left,
                    top: offset.top,
                    width: 20,height: 20
                },
                onEnd:function(){
                    window.location.reload();
                }
            });
        }

//        function initAddToCartAnimation(){
//
//            $(".js_addcart").click(function(ev){
//                addProduct(ev);
//            });
//
//        }

    $(function() {
        //倒计时
        $(".js_countdown").each(function(){
            var until = $(this).data("until");
            until = parseInt(until);
            $(this).scojs_countdown({until: until});
        });
        $(".j_more_tip").click(function(){
            $(".more-tip").toggleClass("am-hide");
            if( $(".more-tip").hasClass("am-hide")){
                $(".j_more_tip").text("...查看更多");
            }else{
                $(".j_more_tip").text("收起");
            }
        });
//        initAddToCartAnimation();
    });
</script>
</block>